<template>
    <div class="view-wrapper">
      <div class="tabs-body">
        <div class="view-inner-wrap">
          <div class="twoBox">
            <div class="activityData">
              <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
                <el-form-item label="" prop="name">
                  <el-input v-model="queryParams.name" placeholder="足迹名称/关联店铺名称" clearable
                    @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="类型：" prop="type">
                    <el-select v-model="queryParams.type" filterable placeholder="请选择">
                    <el-option v-for="item in typeList" :key="item.id" :label="item.value" :value="item.id">
                    </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
              <div style="margin-bottom: 14px" class="topBtn">
                <el-button type="primary" @click="handleAdd">新增足迹</el-button>
              </div>
              <el-table ref="table" v-loading="loading" :data="tableData" stripe border row-key="id">
                <el-table-column label="序号" align="center" type="index" width="64px" />
                <el-table-column label="新增方式" align="center" prop="" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <dict-tag :options="addTypeList" :value="scope.row.type" />
                  </template>
                </el-table-column>
                <el-table-column label="足迹名称" align="center" prop="name" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="类型" align="center" prop="label" :show-overflow-tooltip="true" width="180" />
                <el-table-column label="是否显示" align="center" prop="isShow" :show-overflow-tooltip="true" width="150" />
                <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width"
                  fixed="right">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
            </div>
          </div>
        </div>
      </div>
      <stores-diglog ref="childRef" v-if="storesActivities" :id="id" :pathType="pathType" :visible.sync="storesActivities" @success="_handleSuccess" />  
    </div>
    
  </template>
  <script>
  import {
    getList,
    resetPwd,
    redirect,
  } from "@/api/incentiveManagement/footprints"
  import handlePageMixin from "@/mixins/handlePageMixin"
  import storesDiglog from "./components/storesDiglog"   
  export default {
  
    name: "shopDetail",
    components: {
      storesDiglog,
    },
    mixins: [handlePageMixin],
    data() {
      return {
        id: "",
        storesActivities: false,
        pathType: "add",
        tableData: [],
        typeList: [],
        total: 0,
        queryParams: {
          name: "",
          type: '',
          pageNum: 1,
          pageSize: 10,
        },
        typeList:[],
        addTypeList: [],
      };
    },
    watch: {},
    created() {
      this.getDict()
      this.getList();
    },
    mounted() { },
    methods: {
      //获取状态字典
      getDict() {
          var dictType = "douyin_video_talent_works_label,douyin_video_footprint_type";
          this.$getSelectList(dictType)
            .then((res) => {
              var arr = [{
                id: "",
                value: "全部",
              }, ];
              this.typeList = arr.concat(res.result[0].dictList);
              this.addTypeList = res.result[1].dictList
            })
            .finally(() => {
              this.loading = false;
            });
        },
      /** 查询列表*/
      getList() {
        this.loading = true;
        var data = {
          ...this.queryParams,
        };
        getList(data).then((response) => {
          const { records, total } = response.result;
          this.tableData = records
          this.tableData = this.tableData.map(item => {
            // console.log('item',item)
            Object.keys(item).forEach(key => {
              if (item[key] === '') {
                item[key] = '-'
              }
            })
            return item
          })
          console.log("response", response);
          this.total = total;
          this.loading = false;
        });
      },
  
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        this.handleQuery();
      },
      //新增足迹
      handleAdd() {
        this.storesActivities = true;
        this.pathType = "add";
      },
      //编辑
      handleEdit(row) {
        this.storesActivities = true;
        this.pathType = "edit";
        this.id = row.id
      },
      _handleSuccess() {
        this.getList();
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .tabs-body {
    background-color: #fff;
    padding: 20px;
  }
  
  .topBtn {
    display: flex;
    justify-content: flex-start;
  }
  
  .imgBox {
    display: flex;
    justify-content: center;
  
    img {
      width: 150px;
    }
  }
  
  .el-input {
    width: 350px;
  }
  </style>